<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="aaa">
        <h1>绑定复选框</h1>
       爱好：
       <ul>
           <li v-for="item in hobbies">
               <!-- value前面加冒号，表示动态绑定，后面的值是一个表达式 -->
            <input type="checkbox" :value="item"  id="item.id" v-model="user.hobby">
            <label for="item.id">{{item.name}}</label>
           </li>
       </ul>
       {{user}}
    </div>
    <script>
        const vm = new Vue({
            el:"#aaa",
            data() {
                return {
                    user:{
                        username:"张三",
                        password:"qwe",
                        hobby:[]
                    },
                    hobbies:[
                        {id:0,name:"篮球"},
                        {id:1,name:"足球"},
                        {id:2,name:"乒乓球"},
                        {id:3,name:"台球"},
                        {id:4,name:"保龄球"},
                    ]
                };
            },
        })
    </script>
</body>

</html>